Page({

  /**
   * 页面的初始数据
   */
  data: {
    location: [58,59,52,45,46,47,54,61,68,69,70,63,56,49,42,35,28,21,14,7,6,5,12,11,10,9,8,15,22,29,36,43,50,57],//路线位置 （具体示意图看images 逻辑思路图片）
    step: 0,//行走步数
    count: 0,//计算是否第一次达到终点
  },

  procedure(w) {
    let allGridArr = [];//所有格子数量
    let allGridLine = [];//路线格子坐标
    let piece = [{x:'',y:''}];//起点格子坐标
    let allGridsite = this.data.location;//所有路线格子位置
    let result = [];//装载分割好行列位置的数据
    let num,eq;
    let origin = 58;//棋子起点位置
    
    //先确定要绘制多少个格子
    for (let i = 1; i < 71; i++) {
      allGridArr.push(i);
    }

    //把所有格子分为 每7个一组 方便后面计算行列 X && Y轴坐标 
    
    for (let i = 0; i < allGridArr.length; i += 7) {
      result.push(allGridArr.slice(i, i + 7));
    }

    //根据设定路线格子数量生成基本X && Y轴坐标数组
    allGridsite.forEach((value, index) => {
      allGridLine.push({ x: '', y: '' });
    })

    //根据路线格子 划分好的行列 计算每一个格子的行与列的位置 得到X && Y轴坐标
    //循环路线格子数组
    allGridsite.forEach((values, index) => {
      num = values;
      eq = index;
      //循环对比匹配 每一个格子在第几列（二维数组的坐标）确定Y轴位置
      for (let i = 0; i < result.length; i++) {
        for (let j = 0; j < result[i].length; j++) {
          if (result[i][j] == num) {
            allGridLine[eq].y = i * w;
            //确定 二维数组坐标 根据坐标位置 继续循环 确定位于当前二维数组内的坐标（即X轴位置）
            result[i].forEach((value, index) => {
              if (value == num) {
                allGridLine[eq].x = index * w;
              }
            })
          }
        }
      }
    })

    this.setData({ allGridLine });

    //设置起点位置
    allGridsite.forEach((value,index) => {
      if (value == origin) {
        piece[0] = allGridLine[index] 
        this.setData({ piece });
      }
    });
   
    //设置路线格子样式
    for (let i = 0; i < allGridsite.length; i++) {
      for (let j = 0; j < allGridArr.length; j++) {
        if (allGridsite[i] === allGridArr[j]) {
          allGridArr[j] = -1;
        }
      }
    }

    this.setData({ allGridArr });
  },

  //扔色子
  throwFun() {
    let before = this.data.step;//记录上一次的步数
  
    //随机生成 1 - 6 区间数字
    let num = Math.ceil(Math.random() * 1000000000 % 6); 
    //记录行走步数（位置）
    this.data.step += num;
    
    //如果步数位置超过终点则回到起点 否则继续行走
    if (this.data.step > this.data.location.length -1) {
      if (!this.data.count) {
        this.data.step = this.data.location.length - 1;
      } else {
        this.data.step = 0;
        this.data.piece[0] = this.data.allGridLine[this.data.step];
        this.setData({ piece: this.data.piece });
      }
      this.data.count++;
    }

    if (!this.data.step) {
      this.data.count = 0;
    } else {
      //设置棋子行走位置
      this.data.piece[0] = this.data.allGridLine[before];
      this.setData({ piece: this.data.piece, num });

      let diceTime = setTimeout(() => {
        //如果上一次行走的步数 不等于 当前行走的步数 则执行
        if (before != this.data.step) {
          let walkTime = setInterval(() => {
            before++;//每次行走一步
            this.data.piece[0] = this.data.allGridLine[before];//设置棋子位置
            this.setData({ piece: this.data.piece });
            //如果上一次行走的步数大于或等于当前步数 则停止行走
            if (before >= this.data.step) {
              clearInterval(walkTime);
            }
          }, 500);
        }
        clearTimeout(diceTime);
      },1500)
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取格子的真实宽度
    let query = wx.createSelectorQuery();
    query.select('.grid').boundingClientRect((rect) => {
      this.procedure(rect.width);
    }).exec();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {



  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})